import { Typography, Upload as AntdUpload, List } from 'antd';
import { ItemRender } from 'antd/es/upload/interface';

import { useThemeToken } from '@/theme/hooks';

import { StyledUpload } from './styles';
import UploadIllustration from './upload-illustration';
import UploadListItem from './upload-list-item';

import type { UploadFile, UploadProps } from 'antd';
import { useState } from 'react';
import { SvgIcon } from '../icon';

const { Dragger } = AntdUpload;
const { Text, Title } = Typography;

interface Props extends UploadProps {
  thumbnail?: boolean;
  title?: string;
  description?: string;
  imageSize?: number;
  onFileChanged?: (file: UploadFile) => void;
}

const itemRender: (thumbnail: boolean) => ItemRender = (thumbnail) => {
  return function temp() {
    // eslint-disable-next-line prefer-rest-params
    const [, file, , actions] = arguments;
    return <UploadListItem file={file} actions={actions} thumbnail={thumbnail} />;
  };
};
export function Upload({
  thumbnail = false,
  title,
  description,
  showUploadList,
  accept,
  beforeUpload,
  customRequest,
  imageSize = 118,
  ...other
}: Props) {
  const { colorPrimary } = useThemeToken();
  // const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  return (
    <StyledUpload $thumbnail={thumbnail} className="w-fill">
      <Dragger
        {...other}
        accept={accept}
        beforeUpload={beforeUpload}
        itemRender={itemRender(thumbnail)}
        showUploadList={showUploadList}
        progress={{ strokeWidth: 2 }}
        customRequest={customRequest}
        multiple
        fileList={fileList}
        onChange={onChange}
      >
        <div className="mb-5 mt-5 opacity-100 hover:opacity-80">
          <p
            className="m-auto max-w-[200px]"
            style={{
              border: '1px dashed #D6DBE3',
              borderRadius: '6px',
              padding: '24px',
            }}
          >
            {/* <UploadIllustration /> */}
            {/* <SvgIcon icon='ic-upload' style={{ fontSize: '80px'}}/> */}
            <SvgIcon icon="ic_upload_file" style={{ fontSize: imageSize, color: '#E6E6E6' }} />
          </p>
          <Typography>
            <Title level={5} className="mt-4">
              {title ? title : 'Upload your file'}
            </Title>
            <Text type="secondary">
              {description ? description : 'Drag and drop your file here or click to select'}
            </Text>
          </Typography>
        </div>
      </Dragger>
    </StyledUpload>
  );
}
